<template>
  <div id="login" v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">
    
    <el-container>
      <el-header height="100px">
        <div class="container flexbox">
          <div class="logo">
             <router-link to="/"><img src="./assets/zgs_log.png" width="100%"></router-link>
          </div>
          <div class="nav">
            <el-breadcrumb separator="|">
              <el-breadcrumb-item>说明</el-breadcrumb-item>
              <el-breadcrumb-item><router-link to="/register">注册</router-link></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </el-header>
      <el-main :style="backgroundDiv">
        <el-row :gutter="20" style="margin:80px 80px;">
          <el-col :span="16" style="color:#fff;">
            <div v-html="attention" style="width:80%;text-align:left;padding-top:50px;">{{attention}}</div>
          </el-col>
          <el-col :span="8">
            <div class="myform">
                <div class="login_header">
                  <i class="el-icon-service"></i>
                  <span>考生登录 / USER LOGIN</span>
                </div>
                <div class="login_form">
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
                    <el-form-item label="账号" prop="username">
                      <el-input v-model="ruleForm.username" placeholder="请输入机号或邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                      <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password" @keyup.enter.native="handleLogin"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" style="width:100%;"  @click.native.prevent="handleLogin">登录</el-button>
                    </el-form-item>
                     <div class="forgetPass">
                      <router-link to="/register">注册&nbsp;&nbsp;</router-link>
                      <router-link to="/forgetPassword">忘记密码</router-link>
                    </div>
                  </el-form>
                </div>
            </div>
          </el-col>
        </el-row>
      </el-main>
       <el-footer>@copyright</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      fullscreenLoading:false,
      attention:'注意是事项网站Ico出现在浏览器标签左侧,一般网站都会有,下面就提供2个解决方法: 如果使用织梦或一些建站系统,直接替换网站根目录下的ICO图标文件即可; 其它网站请',
      ruleForm: {
          username: '',
          password:''
        },
      rules:{
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
      },
      backgroundDiv: {
          backgroundImage: 'url(' + require('./assets/1.jpeg') + ')',
          backgroundSize:'cover'
      }
    }
  },
  mounted(){
    this.getInfo();
  },
  methods:{
    handleLogin(){
      var that=this;
      this.$refs.ruleForm.validate((vaild)=>{
        if(vaild){
          var message={
            mobile:this.ruleForm.username,
            password:this.ruleForm.password
          }
          console.log(message);
          this.fullscreenLoading=true;
          this.axios({
            url:this.host+'/3v1t.smserver.cn/index.php/index/login/signin',
            method:'post',
            data:JSON.stringify(message),
            headers:{
                "Content-type":"application/json"
            }
          }).then((res)=>{
            console.log(res);
            that.fullscreenLoading=false;
            if(res.data.code==1){
              that.$message({
                  message:'登录成功',
                  type:'success'
                })
                setTimeout(()=>{
                  sessionStorage.setItem('access-user', JSON.stringify(res.data));
                  that.$router.push('/userHome')
                },1500)
            }else{
              that.$message({
                message:res.data.msg+'',
                type:'warning'
              })
            }
          })
        }else{
          console.log('检查格式！')
          return false;
        }
      })
    },
    getInfo(){
        var that=this;
        that.fullscreenLoading=true;
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/index/login/index',
          method:'get'
        }).then((res)=>{
          console.log(res);
          that.fullscreenLoading=false;
          that.attention=res.data.content;
          that.backgroundDiv.backgroundImage='url('+res.data.thumb+')' 
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
#login{
  height:100%;
  .el-container{
    height:100%;
    background:#393D49;
  }
  .container{
    width:100%;
    margin:0 auto;
    
  }
  header{
      height:100px;
      background:#393D49;
      display:flex;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      .flexbox{
        display:flex;
        align-items: center;
        justify-content: space-between;
      }
  }
    footer{
    height:60px;
    text-align:center;
    line-height:60px;
    color:#fff;
    font-size:14px;
    border-top:1px solid rgba(255,255,255,0.3);
    
 }
  .logo{
    width:500px;
  }
  .nav a,.nav span{
    color:#fff;
    text-decoration:none;
    cursor: pointer;
  }
  .content{
   
  }
  .myform{
    width:360px;
    background:#fff; 
   }

   .login_header{
    height: 50px;
    padding-left: 20px;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
    color: #1E9FFF;
    text-align: left;
    font-size: 14px;
   }

   .login_form{
      padding:35px 0;
      width:85%;
      margin:0 auto;
   }
   .forgetPass{
    text-align:right;
    padding-right:10px;
    a{
      color:#409EFF;
      cursor: pointer;
    }
    a:{
      color:rgba(64, 158, 255, 0.82);
       cursor: pointer;
    }
   }
  .el-main{
    padding:0;
    overflow:hidden;
    background-size: cover;
  }
  .el-form-item__label{
    width:65px;
    text-align:center;
    padding-right:0;
  }
  
}
</style>
